<template>
<div class="index-wrap">
    <div class="index-left">
          <div class="index-left-block">
            <h2>全部产品</h2>
        <div v-for="(product,index) in productList">
             <h3>{{product.category}}</h3>
             <ul>
                 <li v-for="item in product.list">
                    <a :href="item.url" target="_blank"><span>{{item.title}}</span></a>
                    <span class="hot-tag" v-if="item.hot">HOT</span>
                 </li>
             </ul>
             <!-- //底部线条的处理 -->
              <div v-if="index%2 == 0" class="hr"></div>
        </div>
        </div>
           <div class="index-left-block lastest-news">
            <h2>最新消息</h2>
            <ul>
                <li v-for="(news,index) in newData.slice(1,8)">
                    <a :href="news.url" target="_blank"><span>{{news.author_name}}</span></a>
                </li>
                </ul>
        </div>
        </div>
    <div class="index_right">
         <swiper :options="swiperOption" >
    <!-- slides -->
    <swiper-slide v-for="item in banner">
        <a :href="item.url"><img :src="item.img" class="swiperImg"/></a>
    </swiper-slide>
    
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
    <!-- indexbottom -->
    <div class="index_board-list">
        <div class="index-board-item"  v-for="(item,index) in product" 
        :class="['index-board-'+item.tag,{'index-last':index%2 !==0}]">
            <div class="index-board-item-inner">
                <h2>{{item.title}}</h2>
                <p>{{item.content}}</p>
                <div class="index-board-botton">
                    <router-link  :to="{'path':'/detail/'+item.tag}" class="button">立即购买</router-link>
                </div>
            </div>
        </div>
    </div>
         <!-- <div class="index-board-list">
          <div class="index-board-item" 
          v-for="(pro,index) in product" :class=
          "['index-board-'+pro.tag,
          {'line-last' : index%2 !==0}]">
              <div class="index-board-item-inner">
                  <h2>{{pro.title}}</h2>
                  <p>{{pro.content}}</p>
                  <div class="index-board-button">
                      <router-link :to="{path:'/details/'+pro.tag}" class="button">立即购买</router-link>
                  </div>
              </div>
          </div>
      </div> -->
    <!-- indexbottom -->

    </div>
    
    
    </div>
</div>
</template>
<script>
export default{
    name:'layout',
    data(){
        return{
            newData:[],
             //左边的布局 全部产品
             productList:[
                 {
                     category:'手机应用类',
                     list:[
                         {
                             url:'',
                             title:'91助手',
                             hot:true
                         },
                         {
                             url:'',
                             title:'91助手',
                             hot:false
                         },
                         {
                             url:'',
                             title:'91助手',
                             hot:true
                         }

                     ]
                 },{
                     category:'pc产品',
                     list:[
                         {
                             url:'',
                             title:'webstom',
                             hot:true
                         },
                         {
                             url:'',
                             title:'webstom',
                              hot:false
                         },
                         {
                             url:'',
                             title:'webstom',
                              hot:false
                         },

                     ]
                 }
             ],
               //4个立即购买数据
       product:[
               {
                   title:"开放产品",
                   content:"开放产品是一款开放产品",
                    tag:"one"
               },
                {
                   title:"开放产品",
                   content:"开放产品是一款开放产品",
                   tag:"two"
               },
                {
                   title:"开放产品",
                   content:"开放产品是一款开放产品",
                   tag:"three"
               },
                {
                   title:"开放产品",
                   content:"开放产品是一款开放产品",
                  tag:"four"
               }
           ],
             banner:[
                {url:"http://www.baidu.com",
                 img:require("../assets/slideImg/slide1.jpg")
                 },
                {url:"http://www.baidu.com",
                 img:require("../assets/slideImg/slide2.jpg")
                 },
                  {url:"http://www.baidu.com",
                 img:require("../assets/slideImg/slide3.jpg")
                 },
                  {url:"http://www.baidu.com",
                 img:require("../assets/slideImg/slide4.jpg")
                 }
             ],
                     swiperOption: {
                 pagination :{
            el:'.swiper-pagination',
         
          },
         loop:true,
         navigation:{
 nextEl:'.swiper-button-prev',
prevEl:'.swiper-button-next'
        } 
        
        },

        }
    },
    //axios 请求  生命周期函数
    created(){
        this.$axios.get("http://www.wwtliu.com/sxtstu/news/juhenews.php",{
            //参数  6条信息  头条信息
            params:{
              count:6,
                type:'top'
            }
        })
        .then(res =>{
           this.newData=res.data.result.data
            console.log(res.data);
        })
        .catch(error =>{
            console.log(error)
        })
    },
  
    
    
}
</script>
<style scoped>
.index-wrap{
    width:1200px;
    margin:0 auto;
    overflow:hidden;
}
.index-left{
    float: left;
    width:300px;
    text-align:left;
}
.index_right{
    float: left;
    width:900px;
    margin-top:15px;
}
.index-left-block{
    margin:15px;
    background:#fff;
    box-shadow:0 0 1px #ddd;
    
}
.index-left-block .hr{
    margin-bottom:20px;
    height: 2px;
    width:100%;
    background:#000;
}
.index-left-block h2{
    background: #4fc08d;
    color:#fff;
    padding:10px 15px;
    margin-bottom:30px;
}
.index-left-block h3{font-weight:bold;    padding: 0px 15px;}
.index-left-block ul{
    padding:10px 15px;
}
.index-left-block li{
    padding:5px;
}
.index-board-list{
    overflow:hidden;
}
.index-board-item{
    float: left;width:400px;
    background: #ffffff;
    box-shadow:0 0 1px #ddd;
    padding:20px;
    margin-right:20px;
    margin-bottom:20px;
}
/* .index-board-item:nth-child(2n){margin-right:0;} */
.index-board-item-inner{
    min-height:125px;
    padding-left:120px;
}
.index-board-one .index-board-item-inner{
    background:url(../assets/imgae/1.jpg) no-repeat;
}
.index-board-two .index-board-item-inner{
    background:url(../assets/imgae/2.jpg) no-repeat;
}
.index-board-three .index-board-item-inner{
    background:url(../assets/imgae/3.jpg) no-repeat;
}
.index-board-four .index-board-item-inner{
    background:url(../assets/imgae/4.jpg) no-repeat;
}
.hot-tag{
    background: red;
    color:#fff;
}
.index-last{
    margin-right:0;
}
.lastest-news{
    min-height:350px;
}
.slideimg{
    width:100%;
    height:300px;
}
.swiper-box{margin-top:15px;}
.button{background:green;padding:10px 20px;color:#fff;display:inline-block;}
.button{color:#fff;}
.line-last{margin-right:0;}
.swiper-slide .swiperImg{display:block;width:900px;height:340px;}
.index-board-item-inner h2,.index-board-item-inner p{font-weight:bold;margin:10px 0;}
.index-board-item-inner p{font-weight:normal;}
.index-board-botton .button{width:100px;height:30px;background:green;text-align:center;line-height:30px;}
</style>